<template>
	<view class="pageWarpBody">
		<view class="bodyContent"
			:style="{height:!isShaiXuan ? '100vh' : '',overflow:!isShaiXuan ? 'hidden' : 'initial'}">
			<view class="brand_logo">
				<view class="logo_box flex">
					<view class="logo flex1">
						<image :src="shangjiaData.brandImage" mode="aspectFill" class="morenGoodsBG"></image>
					</view>
					<view class="brand_name">
						<text>{{shangjiaData.brandName}}</text>
						<view class="goods_count">{{$t('cloudW.numberOfProducts',{Number:totalCount})}}</view>
					</view>
				</view>
				<view class='nav acea-row row-middle'>
					<view class="item" @click="tabTap(3)" :style="{color:!isMultiple ? '#AF8A40' : ''}">
						<text v-if="!isMultiple">{{$t('cloudW.multiMap')}}</text><!--多图-->
						<text v-else>{{$t('cloudW.singleImage')}}</text><!--单图-->
						
						<text class="iconfont iconduotu"></text>
					</view>
					<view class='item' @click='set_where'>
						<view
							v-if="(where.stockAreas || where.cateIds || where.minPrice || where.maxPrice|| where.priceOrder|| where.seasonCode)"
							style="color:#AF8A40">{{$t('cloudW.filter')}}</view>
						<view v-else>{{$t('cloudW.filter')}}</view>
						<view
							v-if="(where.stockAreas || where.cateIds || where.minPrice || where.maxPrice|| where.priceOrder|| where.seasonCode)"
							style="color:#AF8A40" class="iconfont iconshaixuan"></view>
						<view v-else class="iconfont iconshaixuan"></view>
					</view>
				</view>
			</view>

			<mescroll-uni ref="mescrollRef" top="224" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
				<view class="index-product-wrapper">
					<view class='goods-list' :class="isMultiple?'multiple_on':''">
						<view class="goods-box item" v-for="(item,index) in sortProduct" :key="index"
							@click="godDetail(item)">
							<!-- 单图模式============= -->
							<view class="multiple_box">
								<u-image width="337rpx" height="337rpx" :src="item.image" mode="aspectFit"></u-image>
								<view class="shipaddWarp">
									<block v-if="item.stockArea == option.id" v-for="(option,optionIndex) in iconList" :key="optionIndex">
										<image :src="`../../static/images/${option.site}.png`"class="shipadd" :class="option.site"></image>
										<text class="shipaddName">{{$t(`publicLang.${item.stockAreaName}`)}}</text>
									</block>
								</view>
								<view class="brand_name_box">
									<text class="brand-name line1">{{item.brandName}}</text>
									<view class="store_name line1">{{item.storeName}}</view>
								</view>
							</view>
							<!-- 多图模式========= -->
							<view class="brands flex3">
								<view class="brand-detail">
									<text class="brand-name">{{item.brandName}}</text>
									<text class="store_name">{{item.storeName}}</text>
								</view>
								<view class="shipaddWarp">
									<block v-if="item.stockArea == option.id" v-for="(option,optionIndex) in iconList" :key="optionIndex">
										<image :src="`../../static/images/${option.site}.png`"class="shipadd" :class="option.site"></image>
										<text class="shipaddName">{{$t(`publicLang.${option.name}`)}}</text>
									</block>
								</view>
							</view>
							<view class="goods-detail">
								<text class="price">
									<text class="rmb">
										￥{{item.price}}
									</text>
									<text class="eur" v-if="item.otPrice">€{{item.otPrice}}</text>
									<text class="discount" v-if="item.discount">{{item.discount}}</text>
								</text>
								<view class="goodsimg" @tap.stop>
									<u-image v-for="(img,yulanIndex) in JSON.parse(item.sliderImage)" :key="yulanIndex"
										v-if="yulanIndex<6" width="210rpx" height="210rpx" class='image' :src="`${img}`"
										@click="yulanImg(item.sliderImage,yulanIndex)" mode="aspectFit"></u-image>
									<view class="num_box pos_absolute1 flex2" @click="yulanImg(item.sliderImage,6)"
										v-if="JSON.parse(item.sliderImage).length > 6">
										<image src="../../static/images/pic_icon.png" mode=""></image><text
											class="span">+{{JSON.parse(item.sliderImage).length - 6}}</text>
									</view>
								</view>
								<view v-if="!isMultiple" class="btn flex3">
									<view class="btn_box flex3">
										<button class="addcart" @click.stop="onchangeIsShow(item)">
											<text class="iconfont icongouwuche"></text>
											<text v-if="item.merIsShow!=null">{{$t('cloudW.onTheShelf')}}</text>
											<text v-else>{{$t('cloudW.takeDown')}}</text>
										</button>
										<!-- #ifdef MP -->
										<downLoadImg :goods="item" :configApi.sync="configApi">
											<text slot="cont" class="downLoadImg">
												<text class="iconfont iconxiazai9"></text>
												<text class="txt">{{$t('cloudW.download')}}</text>
											</text>
										</downLoadImg>
										<!-- #endif -->
										<button class="addcart" @click.stop="onchangeIsBest(item)">
											<text class="iconfont iconadd-product"></text>
											<text v-if="!item.isBest">{{$t('cloudW.recommend')}}</text>
											<text v-else>{{$t('cloudW.cancelRecommendation')}}</text>
										</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>

		<!-- 筛选 -->
		<div class="shaixuanMask" @click="isShaiXuan = true" :style="{right:isShaiXuan?'-750rpx':'0'}">
			<screening ref='screening' class="shaixuanCon" :shaixuan1="shaixuan1" :shaixuan2="shaixuan2"
				@getProductList="getProductList" @quxiao="quxiao" :isPinPai="true" :pinpaiId="id"
				:style="{right:isShaiXuan?'-750rpx':'0'}">
			</screening>
		</div>
	</view>
	<!-- </view> -->
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		getShare
	} from "@/api/public.js";
	import {
		productLstApi
	} from "@/api/store.js";
	import {
		productIsshow,
		merchantStoreProductIsBest
	} from "@/api/storeGoods.js";
	import screening from "@/components/filters/filters.vue";
	import downLoadImg from "@/components/downLoadImg/downLoadImg.vue";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		computed: mapGetters(["isLogin", "uid", "iconList"]),
		components: {
			screening,
			downLoadImg,
		},
		data() {
			return {
				configApi: {}, //分享类容配置
				shangjiaData: {}, //商家信息
				sortProduct: [], //商品数据
				where: {
					//商品筛选条件
					page: 1,
					limit: 10,
					keyword: "",
					priceOrder: "",
					stockAreas: "",
					brandIds: "",
					cateIds: "",
					minPrice: "",
					maxPrice: "",
					seasonCode: "",
					// zoneId:'',
					type: "1",
				},
				downOption: {
					textInOffset: this.$t('publicLang.pullDownToRefresh'), // 下拉的距离在offset范围内的提示文本
					textOutOffset: this.$t('publicLang.releaseUpdate'), // 下拉的距离大于offset范围的提示文本
					textLoading: this.$t('publicLang.loading'), // 加载中的提示文本
					textSuccess: this.$t('publicLang.loadedSuccessfully'), // 加载成功的文本
					textErr: this.$t('publicLang.failedToLoad'), // 加载失败的文本
					auto: false
				},
				upOption: {
					textLoading: this.$t('publicLang.loading'), // 加载中的提示文本
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 20, // 每页数据的数量
					},
					empty: {
						tip: this.$t('publicLang.empty') // 提示
						// btnText: "去看看",
					},
				},
				isShaiXuan: true, //筛选条件
				shaixuan1: {},
				shaixuan2: {},

				isMultiple: false, //多图和列表的切换
				id: "", //选购商品id
				storeData: {}, //选购商品详情
				totalCount: 0, //品牌商品数量
			};
		},
		onLoad(options) {
			this.id = options.id + "";
			const eventChannel = this.getOpenerEventChannel();
			let _this = this;
			eventChannel.on("shangjiaData", function(data) {
				console.log(data);
				_this.shangjiaData = JSON.parse(data.data);
			});
			// this.shareApi()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.brandList')
			});
		},
		methods: {
			// 获取商品列表
			upCallback(page) {
				let _this = this;
				this.where.page = page.num;
				this.where.brandIds = this.id;
				let data1 = JSON.parse(JSON.stringify(this.where));
				Object.keys(data1).forEach((item) => {
					if (!data1[item]) delete data1[item];
				});
				productLstApi(data1).then((res) => {
					console.info(res.data);
					var data = res.data.list;
					if (page.num == 1) _this.sortProduct = [];
					_this.sortProduct = _this.sortProduct.concat(data);
					_this.totalCount = res.data.total;
					_this.mescroll.endBySize(data.length, res.data.total);
				});
			},
			//筛选确认
			getProductList(shaixuan, shaixuanReq) {
				console.info(shaixuan, shaixuanReq);
				this.where.stockAreas = shaixuanReq.stockArea.join(",");
				this.where.cateIds = shaixuanReq.cids.join(",");
				this.where.minPrice = shaixuanReq.minPrice;
				this.where.maxPrice = shaixuanReq.maxPrice;
				this.where.maxDiscount = shaixuanReq.maxDiscount;
				this.where.minDiscount = shaixuanReq.minDiscount;
				this.where.supplierIds = shaixuanReq.supplierIds.join(",");
				this.where.seasonCode = shaixuanReq.seasonCode;
				if (shaixuanReq.zoneId) {
					this.where.zoneId = shaixuanReq.zoneId;
				} else {
					delete this.where.zoneId;
				}

				this.isShaiXuan = true;
				this.mescroll.resetUpScroll(true);
			},
			//筛选取消
			quxiao() {
				this.where = {
					page: 1,
					limit: 20,
					keyword: "",
					priceOrder: "",
					stockAreas: "",
					cateIds: "",
					minPrice: "",
					maxPrice: "",
					seasonCode: "",
				};
				this.isShaiXuan = true;
				this.mescroll.resetUpScroll(true);
			},
			//多图切换
			tabTap(index) {
				if (index < 3) {
					if (index == 0) {
						this.isMultiple = false;
					}
					this.tabIndex = index;
				} else this.isMultiple = !this.isMultiple;
			},

			// 跳转详情
			godDetail(item) {
				uni.navigateTo({
					url: `/pages/goods_detail/index?id=${item.id}`,
				});
			},
			//预览图片
			yulanImg(data, index) {
				var that = this;
				uni.previewImage({
					current: index,
					urls: JSON.parse(data),
					longPressActions: {
						itemList: [that.$t('cloudW.sendToFriend'), that.$t('cloudW.savePicture'), that.$t('cloudW.collect')],
					},
				});
			},
			operation(str) {
				if (!str) {
					return;
				}
				var val = str.slice(0, str.length - 1);
				return Number(val);
			},
			set_where() {
				this.isShaiXuan = !this.isShaiXuan;
				console.info(this.isShaiXuan);
				this.$refs.screening.navH = 0;
				this.$refs.screening.getAddFilterHeight();
			},
			onchangeIsShow(row) {
				let that = this
				productIsshow({
					productId: row.id,
					isNotShow: 1,
				}).then((res) => {
					uni.showToast({
						title: `${that.$t('publicLang.successfulOperation')}！`, //操作成功
					});
					that.mescroll.resetUpScroll(true);
				});
			},
			onchangeIsBest(row) {
				let that = this
				merchantStoreProductIsBest({
					productId: row.id,
					isBest: !row.isBest,
				}).then((res) => {
					uni.showToast({
						title: `${that.$t('publicLang.markingSucceeded')}！`,
					});
					row.isBest = !row.isBest;
				});
			},
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			return {
				title: this.configApi.title,
				imageUrl: this.configApi.img,
				desc: this.configApi.synopsis,
				path: "/pages/index/index?spid=" + (this.uid ? this.uid : 0),
			};
		},
		// #endif
	};
</script>
<style lang='scss' scoped>
	.bodyContent {
		.brand_logo {
			height: 225rpx;
			background-color: #ffffff;
			padding: 0 30rpx;
			font-weight: 400;
			position: fixed;
			left: 0;
			right: 0;
			/* #ifdef H5 */
			top: 88rpx;
			/* #endif */
			/* #ifndef H5 */
			top: 0rpx;
			/* #endif */
			z-index: 3;

			.logo_box {
				height: 130rpx;
				padding-top: 20rpx;

				.brand_name {
					font-size: 32rpx;
					color: rgba(34, 34, 34, 1);
					font-weight: 500;
					margin-left: 20rpx;

					.goods_count {
						font-size: 24rpx;
						color: rgba(102, 102, 102, 1);
					}
				}
			}

			.logo {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				background-color: rgba(246, 246, 246, 1);

				image {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
				}
			}

			.nav {
				height: 86rpx;
				color: #454545;
				width: 100%;
				font-size: 28rpx;
				background-color: #fff;
				border-top: 1px solid #e6e6e6;

				.item {
					width: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;

					.iconWarp {
						width: 30rpx;
						font-size: 0;

						.iconshangsanjiao {
							position: relative;
							bottom: -8rpx;
						}

						.iconxiasanjiao {
							position: relative;
							top: -8rpx;
						}
					}

					.iconfont {
						font-size: 28rpx;
						margin-left: 10rpx;
					}

					image {
						width: 15rpx;
						height: 19rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.goods-list {
			width: 100%;
			display: flex;
			flex-direction: column;

			.multiple_box {
				display: none;
			}

			.goods-box {
				width: 100%;
				padding: 30rpx;
				border-bottom: 2rpx solid #eee;
				display: flex;
				flex-wrap: wrap;
				background-color: #ffffff;
				margin-bottom: 20rpx;

				.brands {
					width: 100%;
					display: flex;
					align-items: flex-start;

					image {
						width: 78rpx;
						height: 78rpx;
						margin-right: 20rpx;
						border-radius: 39rpx;
					}

					.brand-detail {
						width: 560rpx;

						.brand-name {
							font-size: 26rpx;
							font-weight: 500;
							color: rgba(34, 34, 34, 1);
							margin-right: 10rpx;
						}

						.store_name {
							font-size: 24rpx;
							color: rgba(102, 102, 102, 1);
						}
					}

					.shipadd {
						width: 20rpx;
						height: 20rpx;
						margin-right: 0;
						vertical-align: middle;
					}

					.shipaddName {
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
						line-height: 28rpx;
						margin-left: 6rpx;
						vertical-align: middle;
					}
				}

				.goods-detail {
					display: flex;
					width: 100%;
					/* padding: 0 100rpx 0 100rpx; */
					flex-direction: column;

					.goodsname {
						font-size: 32rpx;
						margin-top: 16rpx;
					}

					.price {
						.rmb {
							font-size: 34rpx;
							font-weight: bold;
						}

						.hkd {
							margin: 0 16rpx;
							color: #666;
							font-weight: lighter;
						}

						.eur {
							margin: 0 16rpx;
							color: #666;
							font-weight: lighter;
						}

						.discount {
							background-color: #e9d5ac;
							padding: 2rpx 8rpx;
							color: #4c360b;
							border-radius: 4rpx;
						}
					}

					.goodsimg {
						padding: 10rpx 0;
						position: relative;
						display: flex;
						flex-wrap: wrap;

						.image {
							/* margin: 0 8rpx 0 0; */
							margin-bottom: 10rpx;
							background-color: #fff;
							margin-right: 10rpx;

							&:nth-child(3n) {
								margin-right: 0;
							}
						}

						image {
							width: 210rpx;
							height: 210rpx;
							/* margin: 0 8rpx 0 0; */
							margin-bottom: 10rpx;
							background-color: #fff;
							margin-right: 10rpx;

							&:nth-child(3n) {
								margin-right: 0;
							}
						}

						.num_box {
							width: 88rpx;
							height: 34rpx;
							background: rgba(0, 0, 0, 0.6);
							border-radius: 4rpx 0px 0px 0px;
							position: absolute;
							bottom: 28rpx;
							right: 0rpx;
							display: flex;
							align-items: center;

							image {
								margin-left: 20rpx;
								width: 24rpx !important;
								height: 20rpx !important;
								margin: 0 9rpx 0 14rpx !important;
								background-color: transparent !important;
							}

							.span {
								font-size: 24rpx;
								color: rgba(255, 255, 255, 1);
								font-weight: 400;
							}
						}
					}
				}

				.btn_box {
					flex-direction: row;
					display: flex;
					justify-content: flex-end;

					button.addcart {
						width: 160rpx;
						height: 60rpx;
						line-height: 60rpx;
						font-size: 20rpx;
						margin-left: 20rpx;

						.iconfont {
							font-size: 24rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}

		.index-product-wrapper {
			padding: 0 20rpx;
			background-color: #fff;

			&.on {
				min-height: 1500rpx;
			}
		}

		/* 多图模式 */
		.multiple_on {
			display: flex;
			flex-direction: row !important;
			flex-wrap: wrap !important;
			justify-content: space-between !important;

			.multiple_box {
				display: block !important;
			}

			.goods-box {
				width: 337rpx !important;
				padding: 0 !important;
				flex-direction: column;
				padding-bottom: 20rpx !important;
				border-bottom: none;
			}

			.goodsimg {
				display: none !important;
			}

			.eur {
				display: none !important;
			}

			.price {
				display: flex;
				margin-bottom: 12rpx;

				.discount {
					margin-left: 20rpx;
				}
			}

			.brands {
				display: none !important;
			}

			.shipaddWarp {
				margin-top: 24rpx;

				.shipadd {
					width: 20rpx;
					height: 20rpx;
					vertical-align: middle;
				}

				.shipaddName {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 28rpx;
					margin-left: 6rpx;
					vertical-align: middle;
				}
			}

			.brand_name_box {
				margin: 7rpx 0;
				width: 320rpx;

				.brand-name {
					font-weight: 600;
					color: #222222;
					line-height: 45rpx;
				}
			}
		}

		.downLoadImg {
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 20rpx;
			margin-left: 22rpx;

			.iconfont {
				font-size: 24rpx;
				margin-right: 8rpx;
			}
		}
	}

	.shaixuanMask {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		right: -750rpx;
		z-index: 9999;

		.shaixuanCon {
			position: fixed;
			top: 0;
			right: -750rpx;
			z-index: 9999;
			transition: all 0.4s ease-in-out;
		}

		&::v-deep .productSort {
			width: 670rpx;
			position: absolute;
			top: 0;
			right: 0;
		}

		&::v-deep .bottomNav {
			width: 670rpx;
		}
	}
</style>
